package ;

import easelhx.display.Shape;
import easelhx.display.Text;
import js.CanvasRenderingContext2D;
import js.Lib;

/**
 * ...
 * @author 
 */

class TextLink extends Text
{
	private var hoverColor:String;
	private var hover:Bool;

	public function new(text:String, font:String, color:String, hoverColor:String) 
	{
		super(text, font, color);
		
		this.hoverColor = hoverColor;
		this.hover = false;
		this.hitArea = new Shape();
		this.textBaseline = "top";
		
		this.onMouseOver = _onMouseOver;
		this.onMouseOut = _onMouseOut;
	}
	
	override public function draw (ctx:CanvasRenderingContext2D, ?ignoreCache:Bool) : Void
	{
		// save default color, and overwrite it with the hover color if appropriate:
		var color = this.color;
		if (this.hover) { this.color = this.hoverColor; }
		
		// call Text's drawing method to do the real work of drawing to the canvas:
		super.draw(ctx, ignoreCache);
		
		// restore the default color value:
		this.color = color;
		
		// update hit area so the full text area is clickable, not just the characters:
		var hitAreaShape:Shape = cast this.hitArea;
		var txtWidth:Float = 0;
		if (lineWidth != null ) {
			txtWidth = lineWidth;
		} else {
			txtWidth = this.getMeasuredWidth();
		}
		hitAreaShape.graphics.clear().beginFill("#FFF").drawRect(0, 0, txtWidth, this.getMeasuredHeight());
		//untyped this.hitArea.graphics.clear().beginFill("#FFF").drawRect(0,0,this.lineWidth||this.getMeasuredWidth(), this.getMeasuredHeight());
	}
	
	// set up the handlers for mouseover / out:
	private function _onMouseOver () : Dynamic 
	{
		this.hover = true;
	}
	
	private function _onMouseOut () : Dynamic 
	{
		this.hover = false;
	}

}